<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    width: 800px;
    height: 157px;
    border: 1px solid red;
    margin: 200px auto 0;
    overflow-x: scroll;
    /* overflow: hidden; */
}
.content{
    width: 10000px;
    height: 140px;
}
.box1,.box2{
    overflow: hidden;
    float: left;
}
.box1 img,.box2 img{
    width: 200px;
    height: 140px;
    float: left;
}
</style>
</head>
<body>
    
<div class="wrap">
    <div class="content">
        <div class="box1">
            <img src="./imgs/b1.jpg" alt="">
            <img src="./imgs/b2.jpg" alt="">
            <img src="./imgs/b3.jpg" alt="">
            <img src="./imgs/b4.jpg" alt="">
            <img src="./imgs/b5.jpg" alt="">
        </div>
        <div class="box2"></div>
    </div>
</div>

<script>
var wrap = document.querySelector('.wrap');
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

// 复制一组图片
box2.innerHTML = box1.innerHTML;
// 一组图片的宽度
var width = box1.clientWidth;

setInterval(function (){
    wrap.scrollLeft++;// 滚动条自增
    // 临界值判断
    if (wrap.scrollLeft >= width) {
        wrap.scrollLeft = 0;
    }
},15);

// 练习：
// 1.鼠标移入，停止播放，鼠标移出，继续播放
// 2.实现间断滚动（播放一张图片停止2秒，然后再继续播放下一张）

</script>
</body>
</html>